<template>
  <div
    contenteditable="true"
    class="editable"
    :class="{ active: isFocus }"
    @focus="onFocus"
    @blur="onBlur"
    @change="onChange"
    v-html="value"
  ></div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps<{
  modelValue: string
}>()
const emits = defineEmits(['update:modelValue'])
const value = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emits('update:modelValue', v)
  }
})
const isFocus = ref(false)
const onFocus = () => {
  isFocus.value = true
}
const onChange = (e: FocusEvent) => {
  value.value = e.target?.innerHTML
}
const onBlur = (e: FocusEvent) => {
  isFocus.value = false
  onChange(e)
}
</script>

<style lang="scss" scoped>
.editable {
  outline: none;
  padding: 4px 8px;
  line-height: 22px;
  font-size: 14px;
  border: 1px dashed transparent;
  overflow: hidden;
  &:hover {
    border-color: var(--color-border);
  }
  &.active {
    background: linear-gradient(0deg, rgba(229, 231, 241, 0.25), rgba(229, 231, 241, 0.25)), #fff;
  }
}
</style>
